<template>
   <view class="wrap">
      <view class="first">
		  <image class="bg" :src="getImgUrl('/img/startLots.png')" mode="aspectFill" />
		  <view class="start" @tap="showInfo">
		  		<image class="btn" :src="getImgUrl('/img/randomDream/tryBtn.png')" mode="aspectFill" />
		  </view>
	  </view>
	  <view class="second" v-if="status == '2'">
		  <view class="showRandomWrap">
			  <view class="littleCircle"></view>
			  <view class="middleCircle"></view>
			  <view class="bigCircle"></view>
			  <view class="showRandom">
				  <view class="count">第</view>
				  <view class="count">{{signNumber}}</view>
				  <view class="count">签</view>
			  </view>
		  </view>
		  <view style="text-align: center;" @tap="changeUrl">
		  		<image class="showBtn" :src="getImgUrl('/img/randomDream/checkBtn.png')" mode="aspectFill" />
		  </view>
	  </view>
   </view>
</template>
<script>
import { getDrawTypeAPI, lotsDetailsAPI } from '../../../utils/api'
import { imgBaseUrl } from '../../../utils/baseUrl'
export default {
   data() {
     return {
       typeId:'',
	   status:'1', // 1:抽签  2:查看签词
	   signNumber:''
     }
   },
   async onLoad(options){
		const res = await getDrawTypeAPI(options.name);
		this.typeId = res.result.id;
		
   },
   methods: {
		  // 图片渲染
		getImgUrl(image){
			return imgBaseUrl+image;
		},

		async showInfo(){
			const Detailres = await lotsDetailsAPI(this.typeId);
			console.log('res',Detailres)
			this.status = '2'
			this.signNumber = Detailres.result.signNumber
		},
      changeUrl(){
         uni.navigateTo({
            url:`../../../subPackagesA/pages/lotsDetails/lotsDetails?id=${this.typeId}`,
         })
      }
   }
};
</script>
<style lang='less' scoped>
	

	
/* 动画 */
/* 签放大 */
@keyframes randomInfo {
	0% {
		width: 30rpx;
		height: 80rpx;
		font-size: 6px;
	}
	
	100%{
		width: 300rpx;
		height: 810rpx;
		font-size: 32px;
	}
}

/* 查看签词按钮透明度 */
@keyframes opacityInfo {
	0% {
		opacity: 0;
		filter: none;
	}
	
	100% {
		opacity: 1;
		filter: none;
	}
}

/* 小圆的放大 */
@keyframes littleCircleInfo {
	0% {
		width: 200rpx;
		height: 200rpx;
		opacity: 1;
	}
	
	100% {
		width: 400rpx;
		height: 400rpx;
		opacity: .4;
	}
}

/* 中圆的放大 */
@keyframes middleCircleInfo {
	0% {
		width: 200rpx;
		height: 200rpx;
		opacity: 1;
	}
	
	100% {
		width: 600rpx;
		height: 600rpx;
		opacity: 0;
	}
}
/* 中圆的放大 */
@keyframes bigCircleInfo {
	0% {
		width: 200rpx;
		height: 200rpx;
		opacity: 1;
	}
	
	100% {
		width: 600rpx;
		height: 600rpx;
		opacity: .2;
	}
}

.showBtn{
	width: 396rpx;
	height: 100rpx;
	animation: opacityInfo 1s linear forwards;
}
.count{
	color: #FDDC9E;
}
.bigCircle{
	position: absolute;
	width: 200rpx;
	height: 200rpx;
	border-radius: 50%;
	border: 6rpx solid #60523C;
	z-index:1;
	box-shadow: 0 0 40rpx #796546;
	animation: bigCircleInfo .3s 2 linear forwards;
}
.middleCircle{
	position: absolute;
	width: 200rpx;
	height: 200rpx;
	border-radius: 50%;
	border: 6rpx solid #60523C;
	z-index:1;
	box-shadow: 0 0 40rpx #796546;
	animation: middleCircleInfo .2s 2 linear forwards;
}
.littleCircle{
	position: absolute;
	width: 200rpx;
	height: 200rpx;
	border-radius: 50%;
	border: 6rpx solid #60523C;
	z-index:1;
	box-shadow: 0 0 40rpx #796546;
	animation: littleCircleInfo .3s 2 linear forwards;
}
.showRandomWrap{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 80vh;
}
.showRandom{
	width: 30rpx;
	height: 80rpx;
	animation: randomInfo .5s linear forwards;
	background: url('https://ctrlsoft.net.cn/app_static/hesaid/img/randomDream/randomDream.png') no-repeat;
	background-size: 100% 100%;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index:999;
}
.second{
	width: 100%;
	height: 100vh;
	background: rgba(0,0,0,.8);
	position: absolute;
	z-index: 9999;
	top: 0;
}
.wrap{
   width: 100%;
   height: 100vh;  
   .first{
	   width: 100%;
	   display: flex;
	   flex-direction: column;
	   align-items: center;
   }
   .bg{
      width: 100%;
      height: 100vh;
   }
   .start{
      text-align: center;
	  position: fixed;
	  bottom: 30rpx;
      border-radius: 8rpx;
      color: #fff;
	  .btn{
		  width: 546rpx;
		  height: 124rpx;
	  }
   }
}
</style>